<!DOCTYPE html>
<html class="no-js" lang="zh_CN">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <title>${system_admin_title}</title>
    #required_css
</head>

<body>#loading


<div class="app $!layout">
    <!-- 头部菜单 -->
    #header
    <section class="layout">
        <!-- 菜单 -->
        #sidebar
        <!-- 内容主体 -->
        <section class="container">
            <section class="main-content">
                <!-- 主体操作栏 -->
                <header class="header navbar">
                    <!-- 左按钮区 -->
                    <div class="btn-group tool-button">
                        <a class="btn btn-primary navbar-btn" href="$!basePath/system/user" data-pjax><i
                                class="ti-angle-left"></i> 返回</a>
                    </div>
                </header>
                <div class="content-wrap">
                    <div class="wrapper">
                        <section class="panel pt20 pl20 pr20">
                            <form id="userEditForm" role="form" class="form-horizontal parsley-form"
                                  data-parsley-validate action="$!basePath/system/user/edit/do" method="post">
                                <input type="hidden" name="id" value="$!user.id"/>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group has-feedback">
                                            <label for="parentId" class="col-sm-2 control-label">所属机构</label>
                                            <div class="col-sm-8">
                                                <div class="input-group">
                                                    <input id="unitName" type="text" class="form-control"
                                                           placeholder="点击右边选择按钮选择所属部门--->" disabled
                                                           value="$!unitName"/>
			                             		<span class="input-group-btn">
			                             			<button type="button" class="btn btn-primary" data-toggle="modal"
                                                            data-target="#dialogSelectUnit"><i
                                                            class="ti-plus"></i> 选择</button>
			                             		</span>
                                                </div>
                                                <input type="hidden" name="unitId" value="$!unitId"/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group" style="height:44px;">
                                            <label for="name" class="col-sm-2 control-label">角色(多选)</label>
                                            <div class="col-sm-8">
                                                <select tabindex="2" name="roleIds" data-placeholder="<--选择机构后，选择角色"
                                                        style="width:100%" multiple class="form-control chosen"
                                                        data-parsley-required="true">
                                                    #foreach($!role in $!roleList)
                                                    <option value="$!role.id" #if($!roleIds.contains(
                                                    "$!role.id"))selected="selected"#end>$!role.name
                                                    #end
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">用户名</label>
                                            <div class="col-sm-8">
                                                <input type="text" tabindex="3" class="form-control" name="userName"
                                                       data-parsley-required="true" placeholder="登陆时使用的用户名"
                                                       value="$!user.userName">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">姓名</label>
                                            <div class="col-sm-8">
                                                <input type="text" tabindex="4" class="form-control" name="realName"
                                                       placeholder="真实姓名" value="$!user.realName">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">密码</label>
                                            <div class="col-sm-8">
                                                <input id="password" tabindex="5" type="password" class="form-control"
                                                       name="password" data-parsley-required="true" placeholder="密码"
                                                       value="$!user.password">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="name" class="col-sm-2 control-label">密码确认</label>
                                            <div class="col-sm-8">
                                                <input type="password" tabindex="6" class="form-control"
                                                       data-parsley-equalto="#password" data-parsley-required="true"
                                                       name="eqPassword" placeholder="请再输入一次密码" value="$!user.password">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="icon" class="col-sm-2 control-label">邮箱</label>
                                            <div class="col-sm-8">
                                                <input id="icon" type="text" tabindex="7" name="email"
                                                       data-parsley-type="email" class="form-control"
                                                       placeholder="电子邮箱地址 abc@nethsoft.com" value="$!user.email">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="icon" class="col-sm-2 control-label">联系方式</label>
                                            <div class="col-sm-8">
                                                <input type="text" tabindex="8" name="mobile" class="form-control"
                                                       placeholder="固定电话或手机号码" value="$!user.mobile">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="descript" class="col-sm-2 control-label">页面风格</label>
                                            <div class="col-sm-8">
                                                <select tabindex="9" name="pageStyle" data-placeholder="选择页面风格"
                                                        style="width:50%;" class="chosen">
                                                    #foreach($!obj in $!themeMap.entrySet())
                                                    <option value="$!obj.value" #if($!user.pageStyle==$!obj.value)selected="selected"#end>$!obj.key</option>
                                                    #end
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="descript" class="col-sm-2 control-label">QQ</label>
                                            <div class="col-sm-8">
                                                <input type="text" name="qq" tabindex="10" class="form-control"
                                                       placeholder="QQ号码" value="$!user.qq">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="hr-line-dashed"></div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6">
                                        <div class="form-group">
                                            <label for="enabled" class="col-sm-2 control-label">是否启用</label>
                                            <div class="col-sm-8 switcha">
                                                <div class="mr15">
                                                    <input type="checkbox" name="enabled" class="js-switch-blue"
                                                           #if($!user.enabled)checked="checked" #end>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <div class="hr-line-dashed"></div>
                                        <div class="form-group text-center">
                                            <div>
                                                <button class="btn btn-primary btn-form-submit btn-parsley"
                                                        data-loading-text="正在提交...">立即提交
                                                </button>
                                                <button type="reset" class="btn btn-default btn-outline">重置</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </section>
                    </div>
                </div>
                <a class="exit-offscreen"></a>
            </section>
        </section>
    </section>
</div>
<!-- 选择上级菜单 -->
<div id="dialogSelectUnit" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">选择机构</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div id="jsTreeUnit" class="demo"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                <button type="button" class="btn btn-primary" onclick="selectUnit()">确认选择</button>
            </div>
        </div>
    </div>
</div>
#required_js
<script type="text/javascript">
    ns.requireJS(["/framework/plugins/switchery/switchery.js",
        "/framework/js/form/form.js",
        "/framework/js/view/toast.js",
        "/framework/js/view/tree.js",
        "/framework/js/form/select.js",
        "/framework/js/form/validator.js"]);
    function initTreeView() {
        $("#jsTreeUnit").jstree({
            plugins: ["wholerow"],
            core: {
                data: {
                    url: function (node) {
                        return node.id === "#" ? "$!basePath/system/unit/tree" : "$!basePath/system/unit/tree/" + node.id
                    }
                },
                multiple: false
            }
        }).on("dblclick.jstree", function (node) {
            selectUnit();
        });
    }
    //选择机构
    function selectUnit() {
        var tree = $.jstree.reference("#jsTreeUnit");
        var node = tree.get_selected(true);
        $("#userEditForm #unitName").val(node[0].text);
        $("#userEditForm input[name='unitId']").val(node[0].id);
        //根据获取的机构，获取角色列表
        jQuery.post("$!basePath/system/user/system/unitrole/" + node[0].id, {}, function (data) {
            var roleSelect = $("#userEditForm select[name='roleIds']");
            if (data.roles.length > 0) {
                var html = "";
                for (var i = 0; i < data.roles.length; i++) {
                    var role = data.roles[i];
                    html += "<option value='" + role.id + "'>" + role.name + "</option>";
                }
                roleSelect.html(html);
            } else {
                roleSelect.html("");
                Toast.warning("当前机构无角色，请添加角色后再添加用户!");
            }
            roleSelect.trigger("chosen:updated");
        });
        $("#dialogSelectUnit").modal("hide");
    }
    $(function () {
        $('#userEditForm').ajaxForm({
            beforeSubmit: function (arr, $form, options) {
                var roleIds = $("#userEditForm select[name='roleIds']").val();
                if (!roleIds) {
                    Toast.error("至少需要选择一个角色！");
                    return false;
                }
                $form.find("button:submit").button("loading");
            },
            success: function (data, statusText, xhr, $form) {
                if (data.success == true) {
                    Toast.success("用户修改成功，3秒后返回用户管理首页", function () {
                        //返回上级菜单
                        window.location.href = "$!basePath/system/user";
                    });
                    setTimeout(function () {
                        //返回上级菜单
                        window.location.href = "$!basePath/system/user";
                    }, 3000);
                } else {
                    Toast.error(data.error);
                    $form.find("button:submit").button("reset");
                }
            }
        });

        //初始化菜单树
        initTreeView();
    });

</script>
#loading_close
</body>
</html>
